<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Editor Table Plugins</title>
		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/claro/claro.css";
			@import "../../widget/ColorPicker/ColorPicker.css";
		</style>

		<link href="../plugins/resources/editorPlugins.css" type="text/css" rel="stylesheet" />

		<script type="text/javascript">
			var dojoConfig = {
				async: true,
				isDebug: true,
				popup:true
				//forceFirebugLite:true
			};
		</script>

		<script type="text/javascript" src="../../../dojo/dojo.js"></script>
		
		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
		
		<script>
			require([
				"dojo/_base/kernel",
				"dojo/on",
				"dojo/parser",
				"dijit/registry",
				"dijit/Editor",
				"dijit/form/Button",
				"dojox/editor/plugins/TablePlugins",
				"dijit/_editor/plugins/ViewSource",
				"dojo/domReady"
			], function(kernel, on, parser, registry) {
				console.log(kernel.version.toString());
				
				parser.parse();

				var editor = registry.byId("editor");
				var button = registry.byId("removeButton");
				var c = on(button, "click", function(){
					c.remove();
					editor.close();
					editor.destroy();
				});
			});
		</script>
		<style>
			#main{
				width:auto;
				margin:20px 100px;
			}
		</style>
	</head>
	<body class="claro">
		<div id="main">
			<div id="editor" data-dojo-type="dijit/Editor"
				 data-dojo-props="height: '200px', plugins: [
				'undo', 'redo', 'bold','italic','|',
				{name: 'insertTable'},
				{name: 'modifyTable'},
				{name: 'insertTableRowBefore'},
				{name: 'insertTableRowAfter'},
				{name: 'insertTableColumnBefore'},
				{name: 'insertTableColumnAfter'},
				{name: 'deleteTableRow'},
				{name: 'deleteTableColumn'},
				{name: 'colorTableCell'},
				{name: 'tableContextMenu'}
			]">
				Dojo Rocks with a fox in socks. Red socks. In a box.
				<br/><br/>
			        <table width="200" border="2" cellpadding="2" cellspacing="2" id="myTable"
						   style="border-color: #0ff; background-color: #f00">
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td id="myCell">&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td bgcolor="#00FFFF">Text</td>
					</tr>
				</table> 
			</div>
		</div>
		<button id="removeButton" data-dojo-type="dijit/form/Button">Remove Editor</button>
		<hr>
			<h2>Test Different Color Picker in modifyTable and colorTableCell</h2>
			<p>This test uses the dojox/widget/ColorPicker picker in modifyTable, which normally uses dijit/ColorPalette, and vice versa for colorTableCell.</p>
			<div id="editor2" data-dojo-type="dijit/Editor" style="height: 200px"
				 data-dojo-props="plugins: [ 'undo', 'redo', 'bold','italic','|',
					{name: 'modifyTable', colorPicker: 'dojox/widget/ColorPicker'},
					{name: 'colorTableCell', colorPicker: 'dijit/ColorPalette'}]">
				Dojo Rocks with a fox in socks. Red socks. In a box.
				<br/><br/>
			        <table width="200" border="2" cellpadding="2" id="myTable2"
						   style="border-color: #0ff; background-color: #f00">
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td id="myCell2">&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td bgcolor="#00FFFF">Text</td>
					</tr>
				</table> 
			</div>
			
	</body>
</html>
